<%--
  Created by IntelliJ IDEA.
  User: 刘生浩
  Date: 2021/11/2
  Time: 16:58
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%@ include file="../common/IncludeTop.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
</head>

<body>
<style>
    body{
        background: #8FBC8F ;
    }

    .button{
        cursor: pointer;
        width: 140px;
        line-height: 38px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        text-shadow:1px 1px 1px #333;
        border-radius: 5px;
        margin:0 20px 20px 0;
        position: relative;
        overflow: hidden;
    }
    .button:nth-child(6n){
        margin-right: 0;
    }
    .button.green{
        border:1px solid #64c878;
        box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
        background: -webkit-linear-gradient(top,#90dfa2,#84d494);
        background: -moz-linear-gradient(top,#90dfa2,#84d494);
        background: linear-gradient(top,#90dfa2,#84d494);
    }
     .green:hover{
          background: -webkit-linear-gradient(top,#aaebb9,#82d392);
          background: -moz-linear-gradient(top,#aaebb9,#82d392);
          background: linear-gradient(top,#aaebb9,#82d392);
      } .green:active{
            top:1px;
            box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
            background: -webkit-linear-gradient(top,#5eac6e,#72b37e);
            background: -moz-linear-gradient(top,#5eac6e,#72b37e);
            background: linear-gradient(top,#5eac6e,#72b37e);
        }


    body{
        text-align: center;
    }

    .text{
        width: 500px;
        height: 60px;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        background-image: -webkit-linear-gradient(left,blue,#8FBC8F 10%,#8FBC8F 20%,#CC00CC 30%, #8FBC8F 40%, #8FBC8F 50%,#8FBC8F 60%,#8FBC8F 70%,#CC00FF 80%,#8FBC8F 90%,blue 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 25px;
    }
    @keyframes masked-animation {
        0% {
            background-position: 0  0;
        }
        100% {
            background-position: -100%  0;
        }
    }
</style>


<%--<div id="Header">--%>

<%--    <div id="Logo">--%>
<%--        <div id="LogoContent">--%>
<%--            <a href="main"><img src="images/logo-topbar.gif" /></a>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--&lt;%&ndash;    <div id="Menu">&ndash;%&gt;--%>
<%--&lt;%&ndash;        <div id="MenuContent">&ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="viewCart"><img align="middle" name="img_cart"&ndash;%&gt;--%>
<%--&lt;%&ndash;                                    src="images/cart.gif" /></a> <img align="middle" src="images/separator.gif" /> &ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="../account/SignonForm.html">Sign In</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="#">Sign Out</a> <img align="middle" src="images/separator.gif" /> &ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="../account/EditAccountForm.html">My Account</a> <img align="middle" src="images/separator.gif" /> &ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="../help.html">?</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>
<%--&lt;%&ndash;    </div>&ndash;%&gt;--%>
<%--    <div id="Menu">--%>
<%--        <div id="MenuContent">--%>
<%--            <a href="Viewcart?account=${sessionScope.account}&username=${sessionScope.username}"><img align="middle" name="img_cart" src="images/cart.gif" /></a> <img align="middle" src="images/separator.gif" />--%>
<%--            <c:if test="${sessionScope.username == null}">--%>
<%--                <a href="ViewSignonForm">Sign In</a>--%>
<%--            </c:if>--%>
<%--            <c:if test="${sessionScope.username != null}">--%>
<%--                <a href="SignOut">Sign Out</a>--%>
<%--                <!---signOff-->--%>
<%--            </c:if>--%>

<%--            <!--分隔符-->--%>
<%--            <c:if test="${sessionScope.username != null}">--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--                <a href="ViewEditInformationForm?username=${sessionScope.username}">My Account</a>--%>
<%--            </c:if><img align="middle" src="images/separator.gif" />--%>

<%--            <c:if test="${sessionScope.username != null}">--%>
<%--                <a href="ViewListOrder?username=${account.username}">My Orders</a>--%>
<%--            </c:if>--%>
<%--            <c:if test="${sessionScope.username != null}">--%>
<%--                <img align="middle" src="images/separator.gif" />--%>
<%--            </c:if>--%>
<%--            <a href="ViewJPetStore">?</a>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--    <div id="Search">--%>
<%--        <div id="SearchContent">--%>
<%--            <form action="../catalog/SearchProducts.html" method="post">--%>
<%--                <input type="text" name="keyword" size="14" /> <input--%>
<%--                    type="submit" name="searchProducts" value="Search" />--%>
<%--            </form>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <div id="QuickLinks">--%>
<%--        <a href="viewCategory?categoryId=FISH">--%>
<%--            <img src="images/sm_fish.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=DOGS">--%>
<%--            <img src="images/sm_dogs.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=REPTILES">--%>
<%--            <img src="images/sm_reptiles.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=CATS">--%>
<%--            <img src="images/sm_cats.gif" /></a>--%>
<%--        <img src="images/separator.gif" />--%>
<%--        <a href="viewCategory?categoryId=BIRDS">--%>
<%--            <img src="images/sm_birds.gif" /></a>--%>
<%--    </div>--%>
</div>

<div id="Content">

    <script>
        function reloadImage() {
            //document.getElementById("btn").disabled=true;
            document.getElementById("imgservlet").src = 'validation';
        }
    </script>


    <div id="Catalog">
        <form action="ViewIncludeAccountFields" method="post">
            <span class="text"><p>Please enter username and password.</p></span>
<%--            <p>Please enter your username and password.</p>--%>
            </p>
            <p>
            <div>
             <span  >Username:</span><input type="text" name="username" /><br />
           </div>
                <div>
                  <span >Password:</span>  <input type="password" name="password" /><br />
                </div>
              <div>
            Verification code:<input type="text" name="vcode" /><br />
            <img src="code" onclick="this.src='code?'+Math.random()"><br />
            </div>
<%--            <div class="text"><p>text</p></div>--%>
            </p>

<%--            <button type="button" class="button green">BUY NOW</button>--%>
            <input type="submit" class="button green" name="signon" value="Login" />
        </form>

        Need a user name and password? <a href="ViewNewAccount">Register
        Now!</a>

    </div>

</div>

<div id="Footer" >

    <div id="PoweredBy">
        &nbsp<a href="www.csu.edu.cn">www.csu.edu.cn</a>
    </div>

    <div id="Banner">IncludeBottom.html</div>
    <style type="text/css">
        #Menu,#Logo,#Search{
            background-color:		#F5FFFA;
        }
    </style>
    <style type="text/css">
        #QuickLinks{
            background-color:	#8FBC8F;
        }
    </style>
    <style type="text/css">
        #Banner,#PoweredBy{
            background-color:#8FBC8F;
        }
    </style>
</div>

</body>
</html>